<template>
  <div class="_wrap">
    <div class="_top">
      <div class="item" v-for="(item, i) in totalArr" :key="i">
        <div class="icon"><img :src="item.ico"></div>
        <div class="info">
          <div class="label">{{item.label}}({{item.unit}})</div>
          <div class="value"><count-to ref="countTo" class="val" :start-val="0" :end-val="item.value" :duration="3600" /></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import countTo from 'vue-count-to'
  export default {
    name: 'itemCenterTop',
    components: { countTo },
    data() {
      return {
        interval: null,
        totalArr: [
          { ico: require('@/assets/img/icon1.svg'), label: '学校数', value: 342, unit: '所' },
          { ico: require('@/assets/img/icon2.svg'), label: '学生数', value: 131065, unit: '人' },
          { ico: require('@/assets/img/icon3.svg'), label: '班级数', value: 3103, unit: '个' },
          { ico: require('@/assets/img/icon4.svg'), label: '教师数', value: 14098, unit: '人' }
        ],
      }
    },
    beforeDestroy() {
      if (this.interval) {
        clearInterval(this.interval);
      }
    },
    mounted() {
      this.handleStart()
    },
    methods: {
      handleStart(){
        if (this.interval) {
          clearInterval(this.interval)
        }
        this.interval = setInterval(() => {
          for (let i = 0; i < this.$refs.countTo.length; i++){
            this.$refs.countTo[i].start()
          }
        }, 8600) // 8.6 = 间隔5秒更新 + 数字动画3.6s
      }
    }
  }
</script>

<style scoped lang="scss">
  ._wrap {
    ._top {
      display: flex; align-items: center; justify-content: space-between;
      .item {
        display: flex; align-items: center;
        .icon {
          width: 72px; height: 72px; position: relative;
          display: flex; align-items: center; justify-content: center;
          &::before {
            content: ''; display: block; position: absolute; z-index: 1;
            width: 100%; height: 100%; background: url('~@/assets/img/iconBg.svg') no-repeat;
            animation: rotate 10s linear infinite;
          }
          img { width: 32px; display: block; position: relative; z-index: 33; }
          @keyframes rotate {
            from {
              transform: rotate(0deg);
            }
            to {
              transform: rotate(360deg);
            }
          }
        }
        .info {
          margin-left: 10px;
          .label { font-size: 20px; font-family: PingFangSC; letter-spacing: 1.2px; font-weight: bold; }
          .value {
            font-size: 36px; color: #00FFFA; font-family: DINPro; letter-spacing: 2.16px;
          }
        }
      }
    }
  }
</style>
